<template>
	<div class="block">
		<input
			type="text"
			v-model="title"
			style="margin: 10px 0"
		/>
		<div class="btns">
			<p>dialog</p>
			<el-button
				type="primary"
				size="small"
				@click="dialog1"
				>info 弹框</el-button
			>
			<el-button
				type="warning"
				size="small"
				@click="dialog2"
				>warning 弹框</el-button
			>

			<p>confirm</p>
			<el-button
				type="primary"
				size="small"
				@click="confirm1"
				>info 对话框</el-button
			>
			<el-button
				type="warning"
				size="small"
				@click="confirm2"
				>warning 对话框</el-button
			>

			<p>message</p>
			<el-button
				type="primary"
				size="small"
				@click="message1"
				>info 信息提示</el-button
			>
			<el-button
				type="warning"
				size="small"
				@click="message2"
				>error 信息提示</el-button
			>
			<p>open</p>
			<el-button
				type="primary"
				size="small"
				@click="open1"
				>文件选择(带过滤项)</el-button
			>
			<el-button
				type="warning"
				size="small"
				@click="open2"
				>目录选择(默认指定的目录打开)</el-button
			>
			<p>save</p>
			<el-button
				type="primary"
				size="small"
				@click="saveFile"
				>保存图片文件</el-button
			>
		</div>
	</div>

	<div class="block">
		<h4>自定义事件</h4>
		<div>
			是否监听 after-end-event事件:
			<span
				:style="{
					color: isListenEvent ? 'green' : 'red',
					fontWeight: 'bold'
				}"
				>{{ isListenEvent ? "是" : "否" }}</span
			>
		</div>
		<div class="btns">
			<el-button
				type="primary"
				size="small"
				@click="listenEvent"
				>监听事件</el-button
			>
			<el-button
				type="warning"
				size="small"
				@click="unlistenEvent"
				:disabled="!isListenEvent"
				>解绑事件</el-button
			>
			<el-button
				type="success"
				size="small"
				@click="emitEvent"
				>前端触发 front-end-event事件</el-button
			>
			<el-button
				size="small"
				type="success"
				@click="rustEmitEvent"
				:disabled="!isListenEvent"
				>后端触发 after-end-event事件</el-button
			>
		</div>
	</div>

	<div class="block">
		<h4>通知</h4>
		<div class="btns">
			<el-button
				type="primary"
				size="small"
				@click="isNotification"
				>检查是否授权发送通知权限</el-button
			>
			<el-button
				type="primary"
				size="small"
				@click="requestPer"
				:disabled="!permissionGranted"
				>请求发送通知的权限</el-button
			>
			<el-button
				type="primary"
				size="small"
				@click="sendNoti"
				:disabled="!permissionGranted"
				>发送通知</el-button
			>
		</div>
	</div>

	<div class="block">
		<h4>操作系统信息</h4>
		<div class="btns">
			<el-button
				type="primary"
				size="small"
				@click="getSystemInfo"
				>获取操作系统信息</el-button
			>
			<ul>
				<li>CPU结构: {{ systemInfo.arch }}</li>
				<li>平台: {{ systemInfo.platform }}</li>
				<li>用户临时目录: {{ systemInfo.tempdir }}</li>
				<li>系统类型: {{ systemInfo.type }}</li>
				<li>系统版本: {{ systemInfo.version }}</li>
			</ul>
		</div>
	</div>
</template>

<script setup lang="ts">
	// 更多 Tauri API ->  https://tauri.app/zh/v1/api/js/

	import { ref } from "vue";
	import { ElMessage, ElMessageBox } from "element-plus";

	// https://tauri.app/zh/v1/api/js/dialog
	import { ask, confirm, message, open, save } from "@tauri-apps/api/dialog";
	import { appDir } from "@tauri-apps/api/path";

	// https://tauri.app/zh/v1/guides/features/events
	import { emit, listen } from "@tauri-apps/api/event";

	// https://tauri.app/zh/v1/api/js/notification#ispermissiongranted
	import {
		isPermissionGranted,
		requestPermission,
		sendNotification
	} from "@tauri-apps/api/notification";

	// https://tauri.app/zh/v1/api/js/os#arch-1
	import { arch, platform, tempdir, type, version } from "@tauri-apps/api/os";

	const title = ref("tauri API");

	//// tauri 系统弹框
	const dialog1 = async () => {
		const yes1 = await ask("弹框1", "标题");
		console.log("yes1: ", yes1);
	};

	const dialog2 = async () => {
		const yes2 = await ask("弹框2", {
			title: "标题",
			type: "warning"
		});
		console.log("yes2: ", yes2);
	};

	const confirm1 = async () => {
		const confirm1 = await confirm("内容", "标题");
		console.log("confirm1: ", confirm1);
	};

	const confirm2 = async () => {
		const confirm2 = await confirm("内容", {
			title: "标题",
			type: "warning"
		});
		console.log("confirm2: ", confirm2);
	};

	const message1 = async () => {
		const message1 = await message("内容", "标题");
		console.log("message1: ", message1);
	};

	const message2 = async () => {
		const message2 = await message("内容", {
			title: "标题",
			type: "error"
		});
		console.log("message2: ", message2);
	};

	const open1 = async () => {
		const selected = await open({
			title: "文件选择(带过滤项)",
			multiple: true, // 多选
			filters: [
				// 添加文件过滤
				{
					name: "Code File",
					extensions: ["js", "json", "ts", "vue", "rs"]
				},
				{
					name: "Image",
					extensions: ["png", "jpeg"]
				}
			]
		});

		if (Array.isArray(selected) && selected.length > 1) {
			console.log("多个文件");
		} else if (selected === null) {
			console.log("取消选择");
		} else {
			console.log("单个文件");
		}
		console.log("open1: ", selected);
	};

	const open2 = async () => {
		const selected = await open({
			title: "目录选择(默认指定的目录打开)",
			directory: true,
			multiple: true,
			defaultPath: await appDir() // 默认的目录
		});
		if (Array.isArray(selected) && selected.length > 1) {
			console.log("多个文件");
		} else if (selected === null) {
			console.log("取消选择");
		} else {
			console.log("单个文件");
		}
		console.log("open2: ", selected);
	};

	const saveFile = async () => {
		const filePath = await save({
			title: "保存图片文件",
			filters: [
				{
					name: "Image",
					extensions: ["svg", "png", "jpeg", "jpg"] // 指定文件的后缀
				}
			]
		});
		console.log("filePath: ", filePath);
	};

	//// 自定义事件
	const isListenEvent = ref(false);

	const openBox = (
		title: string,
		context: string,
		type: "success" | "info" | "warning" | "error",
		success?: () => void,
		error?: () => void
	) => {
		ElMessageBox.confirm(title, context, {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type
		})
			.then(() => {
				if (typeof success === "function") {
					success();
				} else {
					ElMessage.success("确定");
				}
			})
			.catch(() => {
				if (typeof error === "function") {
					error();
				} else {
					ElMessage.info("取消");
				}
			});
	};

	const unlisten = ref(() => {});
	const listenEvent = async () => {
		if (isListenEvent.value) {
			unlisten.value();
			console.warn("重复监听事件");
			// ElMessage.warning("重复监听事件");
			// return;
		}

		unlisten.value = await listen<string>("after-end-event", (event) => {
			console.log("after-end-event事件 触发了", event);
		});
		ElMessage.success("监听 after-end-event事件 成功");
		isListenEvent.value = true;
	};

	const unlistenEvent = async () => {
		openBox("确定要解绑 after-end-event事件 吗?", "警告", "warning", () => {
			unlisten.value();
			ElMessage.success("解绑成功");
			isListenEvent.value = false;
		});
	};

	const emitEvent = async () => {
		await emit("front-end-event", {
			name: "张三",
			age: 18
		});
		ElMessage.success("已发送 front-end-event事件");
	};

	const invoke = window.__TAURI__.invoke;
	const rustEmitEvent = () => {
		invoke("emit_event");
	};

	//// 通知
	const permissionGranted = ref(false);
	const isNotification = async () => {
		permissionGranted.value = await isPermissionGranted();
		if (permissionGranted.value) {
			ElMessage.success("已授权");
		} else {
			ElMessage.error("未授权");
		}
	};

	const requestPer = async () => {
		if (!permissionGranted.value) {
			permissionGranted.value = await isPermissionGranted();
			if (!permissionGranted.value) {
				const permission = await requestPermission();
				permissionGranted.value = permission === "granted";
			}
			ElMessage.success("已获取权限");
		}
	};

	const sendNoti = () => {
		sendNotification({
			title: "标题",
			body: "通知内容",
			icon: "F:\\study\\learn_tauri\\src-tauri\\icons\\icon.ico"
		});
	};

	//// 操作系统信息
	const systemInfo = ref<Record<string, string>>({});
	const getSystemInfo = async () => {
		systemInfo.value = {
			arch: await arch(),
			platform: await platform(),
			tempdir: await tempdir(),
			type: await type(),
			version: await version()
		};
	};
</script>

<style lang="scss" scoped>
	@import "/src/styles/var.scss";

	.block {
		border: 1px solid $primary;
		padding: 8px;
		margin: 8px;
		.btns {
			margin-top: 10px;
			p {
				margin-top: 6px;
			}
		}
	}
</style>
